<template>
  <div>
    <div class="login">
      <div class="login-title">登录页面</div>
      <div class="login-input">
        <input
          class="phone"
          type="text"
          placeholder="请输入账号"
          v-model="phone"
        />
        <div class="code">
          <input
            class="password"
            type="password"
            placeholder="请输入密码"
            v-model="code"
          />
          <button @click="sendCode">发送验证码</button>
        </div>
      </div>
      <div class="login-button">
        <button @click="Login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getphoneLogin, getcodeLogin } from "../request/api/home";
export default {
  data() {
    return {
      phone: "",
      code: "",
    };
  },
  methods: {
    Login() {
      getcodeLogin({ phone: this.phone, code: this.code }).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$store.commit("updateLogin", true);
          this.$store.commit("updataToken", res.data.code);
          this.$router.push("/InfoUser");
        } else {
          alert("验证码错误");
        }
      });
    },
    sendCode() {
      getphoneLogin(this.phone).then((res) => {
        console.log("111", res);
      });
    },
  },
};
</script>

<style lang="less">
.login {
  .login-title {
    font-size: 0.64rem;
    font-weight: 700;
    margin: 10rpx auto;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .login-input {
    margin: 10px;
    text-align: center;
    .phone {
      border-radius: 0.4rem;
      padding: 0.2rem;
      width: 70%;
      margin-top: 20px;
    }
    .code {
      .password {
        border-top-left-radius: 0.4rem;
        border-bottom-left-radius: 0.4rem;
        padding: 0.2rem;
        width: 50%;
        margin-top: 20px;
      }
      button {
        height: 40px;
        border-top-right-radius: 0.4rem;
        border-bottom-right-radius: 0.4rem;
      }
    }
  }
  .login-button {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    button {
      width: 70%;
      height: 45px;
      border-radius: 0.4rem;
      font-size: 30px;
    }
  }
}
</style>
